<template>
	<view class="ker_signin">
		<view class="continue_day">已经连续签到{{continueDays}}天</view>
		<view class="ker_sign_con">
			<block v-for ="(item,index) in sevenDate" :key="index">
				<view 
					class="item" 
					:style="{width: styTarget.width, height: styTarget.height, borderRadius: styTarget.borderRadius, background: item.sign ? styTarget.activeBgColor: styTarget.background, color: item.sign ? styTarget.activeColor : styTarget.color, fontSize: styTarget.fontSize}"
				>
					<view class="ker_sign_msg">
						<view>{{item.reward}}</view>
						<view>{{item.date==todayDate ? '今天':item.date}}</view>
					</view>
					<image 
						v-if="isBgImg" 
						:src="item.sign ?bgImgActive : bgImg" 
						class="bg_img" 
						:style="{borderRadius: styTarget.borderRadius}"
					></image>
				</view>
			</block>
		</view>
		<!-- 签到按钮 -->
		<button class="sign_btn" 
			@tap="clickSign" 
			v-if="!isSign"
			:loading="loading"
			:style="{width: styTarget.btnWidth, height: styTarget.btnHeight, background:  styTarget.btnBackground, borderRadius:styTarget.btnradius, color:styTarget.btnColor, fontSize: styTarget.btnFontSize}"
		>签到</button>
	
	</view>
</template>

<script>
	
	/**
	 * @description 签到
	 * @property {Array} rewardData 7天对应的奖励数据  接口返回
	 * @property {String} todayDate 今天的日期   接口返回
	 * @property {Number} continueDays   连续签到天数  接口返回
	 * @property {Boolean} isBgImg  是否使用背景图    默认为false
	 * @property {String} bgImg 未签到的背景图片
	 * @property {String} bgImgActive  签到后的背景图片
	 * @property {Object} styleObj  样式内容
	 * @property clickSign 点击签到方法 
	*/
 
	export default {
		name:"ker-sign-in",
		props:{
			/* 7天对应的奖励数据 */
			rewardData: {
				type:Array,
				default(){
					return []
				}
			},
			/* 今天的日期 */
			todayDate: {
				type:String,
				default:''
			},
			/* 连续签到天数 */
			continueDays: {
				type:Number,
				default: 0
			},
			/* 是否使用背景图 */
			isBgImg: {
				type: Boolean,
				default: false
			},
			/* 未签到的背景图片 */
			bgImg:{
				type:String,
				default: ''
			},
			/* 签到后的背景图片 */
			bgImgActive:{
				type: String,
				default: ''
			},
			/* 签到列表的样式 */
			styleObj: {
				type: Object,
				default() {
					return{}
				}
			}
		},
		data() {
			return {
				sevenDate: [],   //最近7天日期
				isSign: false, // 今天是否已签到
				loading: false,
				todayReward: '',  //今天签到的奖励
				styTarget: {
					width: '90rpx',  //签到列表项的宽
					height: '136rpx',  //签到列表项的高
					borderRadius: '14rpx', //签到列表项的圆角
					background: '#0885EE', //未签到时的背景色
					color: '#fff',  //未签到时的文字颜色
					fontSize: '24rpx',  //文字大小
					activeBgColor: '#FFFF00' ,  //已签到时的背景色
					activeColor: '#333'  ,//已签到时的文字颜色
				  btnWidth: '200rpx', 
					btnHeight: '60rpx',
					btnBackground: '#0885EE',
					btnradius: '40rpx',
					btnColor: '#fff',
					btnFontSize: '30rpx'
				}
			};
		},

		watch:{
			rewardData: {
				immediate: true,
				handler(e) {
					if (e.length > 0) {
						this.dateInit(e)
					}
				}
			},
			styleObj: {
				immediate: true,
				handler(e) {
					this.styTarget = Object.assign(this.styTarget, this.styleObj)   
				}
			}
		},
		methods: {
			/* 签到日历初始化 */
			dateInit (list) {
				this.loading = false;
				this.sevenDate = list;
				let today = list.find(e => e.date === this.todayDate);
				this.isSign = today.sign;
				this.todayReward = today.reward
			},
			/* 点击签到按钮 */
			clickSign() {
				this.loading = true;
				this.$emit('sign', {
					todays: this.todayDate,
					rewards: this.todayReward
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ker_signin{
		.ker_sign_con{
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 30rpx 0;
			&::after{
				content: '';
				position: absolute;
				top: 50%;
				left: 0;
				width: 100%;
				height: 1px;
				transform: translateY(-50%);
				background: #333;
				z-index: -1;
			}
			.item{
				position: relative;
				// font-size: 24rpx;
				// color: #fff;
				// width: 90rpx;
				// height: 136rpx;
				// background: #0885EE;
				.ker_sign_msg{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
				}
				.bg_img{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
				}
			}
			.item_active{
				color: #333;
				background: #FFFF00;
			}
		}
		.continue_day{
			margin: 30rpx auto;
		}
		.sign_btn{
			margin: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
